import React, { Component } from 'react';
import './SideTabbar.scss'
import { category_lis,category_subcate } from '../utils/api'
import index from './Index';

class SideTabbar extends Component {
    constructor(porps){
        super(porps);
        this.state={
            list:[],//一级列表的数据
            subcate:[],//二级列表的数据
            count1:0,//一级列表的点击索引
            count2:0,//二级列表的点击索引
            id1:0,
            id2:0,
        }

    }
    // 定义点击方法
    onecl(index){
        this.setState({
            count1:index,
        },()=>{
            var id = this.state.list[this.state.count1].id ;
            this.setState({
                id1:id,
            },()=>{
                console.log(this.state.list[this.state.count1].id);
                category_subcate({id:this.state.id1}).then((req)=>{
                    console.log(req);
                    var erlist = req.data.subcate.subcategory;
                    console.log(erlist)
                    this.setState({
                        subcate:erlist,
                    })
                })
            })
           
        })
        // console.log(index)
    }
    towcl(index){
        this.setState({
            count2:index,
        },()=>{
            console.log(index,this.state.count2)

            // category_subcate( {id:this.stater} ).then()
        })
        console.log(this.state.subcate)
       
    }

    render() {
        return (
            <div className='bigbox'>
                <div className='title'>分类</div>
                <div className='inp'><input type="text" className='input' placeholder='搜索店铺内的商品'/></div>
                <div className='sidetabbar'>
                    {/* 左侧一级列表 */}
                    <div className="left">
                            {
                            this.state.list.map((item,index)=>{
                                return (
                                    <div className={`leftbox ${this.state.count1==index ? 'active':''}`} key={index}   onClick={()=>{this.onecl(index)}}  >{item.name}</div>
                                )
                            })
                            }
                    </div>
                            
                    <div className='right'>
                        {/* 右侧二级列表 */}
                        <div className='tou'>
                               {
                                    this.state.subcate.map((item,index)=>{
                                        return (
                                            <div className={`listname ${this.count2==index?'active2':''}`} onClick={()=>{this.towcl(index)}}  key={index}>{item.name}</div>
                                        )

                                        })
                                }  
                        </div>
                        {/* 右侧三级列表 */}
                        <div className='xia'>
                            {
                                this.state.subcate.map((item,index)=>{
                                    return (
                                        <div className='goods' key={index}>
                                            <img src={item.subNavs[0].pic} alt="" />
                                            <div className='goodname'>{item.subNavs[0].name}</div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
                    
                
            </div>
        );
    }
    // 组件挂载生命周期
    componentDidMount(){
        category_lis().then((req)=>{
            console.log(req)
            var list1 = req.data.list;
            this.setState({
                list:list1
            },()=>{

            })
        })
        category_subcate( {id:225510} ).then((req)=>{
            // console.log(req);
            var list2 = req.data.subcate.subcategory;
            this.setState({
                subcate:list2
            },()=>{
                console.log(this.state.subcate);
                // console.log(this.state.subcate[0])
                // console.log(this.state.subcate[1])

                // console.log(this.state.subcate[0].subNavs[0].id)

            }) 
        })
    }
}

export default SideTabbar;